$(function(){
    //1.监听游戏规则的点击
    $(".rules").on("click",function(){
        $(".rule").stop().fadeIn(100);
    });
    //监听关闭按钮
    $(".rule>a").click(function(){
        // $(this).parent(".rule").stop().fadeOut(100);
        $(".rule").fadeOut(100);
    });
    //监听开始游戏按钮
    $(".start").click(function(){
        $(this).fadeOut(100);
        //调用处理进度条的方法
        progressHandler();
        // 调用处理灰太狼动画的方法
        wolfAnimation();
    });
    //监听重新开始按钮
    $(".reStart").click(function(){
        $(".mask").stop().fadeOut(1000);
        //重现进度条
        progressHandler();
        //调用处理灰太狼动画的方法
        wolfAnimation();
        //将分数重置为0
        $(".score").text("0");
    })

    //定义专门处理进度条的方法
    function progressHandler(){
        // 设置进度条的宽度，方便重新开始的时候进度条有宽度
            $(".progress").css({
                width:180
            });
        var timer = setInterval(function(){
            //拿到当前progress的宽度
            var progressWidth = $(".progress").width();
            progressWidth -= 10;
            // 重新赋值给进度条
            $(".progress").css({
                width:progressWidth
            });
            //监听进度条是否走完
            if(progressWidth <= 0){
                //关闭定时器
                clearInterval(timer);
                $(".mask").stop().fadeIn(1000);
                //停止灰太狼动画
                stopWolfAnimation();
            }
            
        },1000);
    }

    // 定义处理灰太狼动画的方法
    var wolfTimer;
    function wolfAnimation(){
        //定义两个数组保存所有灰太狼和小灰灰的图片
        var wolf_1 = ["/images/h0.png","/images/h1.png","/images/h2.png","/images/h3.png","/images/h4.png","/images/h5.png","/images/h6.png","/images/h7.png","/images/h8.png","/images/h9.png"]
        var wolf_2 = ["/images/x0.png","/images/x1.png","/images/x2.png","/images/x3.png","/images/x4.png","/images/x5.png","/images/x6.png","/images/x7.png","/images/x8.png","/images/x9.png"]
        //定义一个数组保存所有可能出现的位置
        var arrPos = [
            {left:"100px",top:"115px"},
            {left:"20px",top:"160px"},
            {left:"190px",top:"142px"},
            {left:"105px",top:"193px"},
            {left:"19px",top:"221px"},
            {left:"202px",top:"212px"},
            {left:"120px",top:"275px"},
            {left:"30px",top:"295px"},
            {left:"129px",top:"297px"},
        ]
        //创建一个图片
        var $wolfImage = $("<img src='' class='wolfImage'>");
        // console.log($wolfImage);
        //随机获取图片的位置 
        var posIndex = Math.round(Math.random()*8);
        //设置图片的显示位置
        $wolfImage.css({
            position: "absolute",
            left:arrPos[posIndex].left,
            top:arrPos[posIndex].top
        });
        //随机获取数组类型
        var wolfType = Math.round(Math.random())== 0 ? wolf_1 :wolf_2;
        //设置图片内容
        // $wolfImage.attr("src",wolfType[5]);
        window.wolfIndex = 0;
        window.wolfIndexEnd = 5;
        wolfTimer = setInterval(function(){
            if(wolfIndex > wolfIndexEnd){
                $wolfImage.remove();
                clearInterval(wolfTimer);
                wolfAnimation();
            }
            $wolfImage.attr("src",wolfType[wolfIndex]);
            wolfIndex++;
        },300);
        //将图片添加到界面上
        $(".container").append($wolfImage);
        //调用处理游戏规则的方法
        gameRules($wolfImage);

    }

    //停止灰太狼动画
    function stopWolfAnimation(){
        $(".wolfImage").remove();
        clearInterval(wolfTimer);
    }

    //调用处理游戏规则的方法
    function gameRules($wolfImage){      
        //one点一次
        $wolfImage.one("click",function(){
            //修改索引
            window.wolfIndex = 5;
            window.wolfIndexEnd = 9;
            //拿到当前点击图片的地址
            var $src = $(this).attr("src");
            //根据图片地址是否是灰太狼
            var flag = $src.indexOf("h") >= 0;
            //console.log($src);
            if(flag){
                $(".score").text(parseInt($(".score").text())+10);
            }else{
                $(".score").text(parseInt($(".score").text())-10);
            }
            
        });
    }
});